<template>
  <a-config-provider :locale="zhCN">
    <div class="flex">
      <div class="w-180px min-h-100vh overflow-x-hidden overflow-y-auto">
        <a-menu
          v-model:selected-keys="current"
          mode="inline"
          :items="items"
          theme="dark"
          class="h-full"
          @select="handleSelect"
        />
      </div>

      <div class="flex-1 h-100vh overflow-x-hidden overflow-y-auto p-20px">
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </div>
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
const current = ref<any[]>(['home'])
import routes from '@renderer/router/routes'
import zhCN from 'ant-design-vue/es/locale/zh_CN'

const items = computed(() => {
  return routes
    .filter((item) => !item.meta!.hidden)
    .map((item: any) => {
      return {
        key: item.name,
        label: item.meta.title
      }
    })
})

const router = useRouter()
const handleSelect = (val) => {
  const { key } = val
  router.push({ name: key })
}
onMounted(() => {})

watch(
  () => router.currentRoute.value.name,
  (val) => {
    current.value = [val]
  }
)
</script>

<style scoped lang="scss"></style>
